<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" swiper_main :indicator-dots="indicatorDots" circular="true" :autoplay="autoplay" :interval="interval" vertical="true" :duration="duration">
                        <swiper-item class="swiperItem" v-for="(item,index) in list" :key="index">
                            <view class="swiper-item uni-bg-red">{{item}}</view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		props:[
			'list'
		],
	    data() {
	        return {
	            background: ['color1', 'color2', 'color3'],
	            autoplay: true,
	            interval: 3000,
	            duration: 1000,
				swiperList:''
	        }
			
	    },
		created() {
			
		},
	    methods: {
			
	        changeIndicatorDots(e) {
	            this.indicatorDots = !this.indicatorDots
	        },
	        changeAutoplay(e) {
	            this.autoplay = !this.autoplay
	        },
	        intervalChange(e) {
	            this.interval = e.target.value
	        },
	        durationChange(e) {
	            this.duration = e.target.value
	        }
	    }
	}
</script>

<style lang="scss" scoped>
	.swiper{
		height: 40rpx;
	}
	.swiper-item{
		height: 40rpx;
		line-height: 40rpx;
		// color: #4BB1AF;
		font-size: 25rpx;
	}
</style>